<template>
  <view class="wrap">
    <block v-if="type == 2">
      <view class="goods-box">
        <image :src="retData.info.data_image"></image>
        <view class="text-d">
          <view class="name line1">{{retData.info.name}}</view>
          <view class="span line1">{{retData.info.corporate}}</view>
          <view class="span line1">规格：{{retData.info.data_specs}}</view>
        </view>
      </view>
      <view class="input-box">
        <view class="name">纠错类型</view>
        <view class="value" @click="alterMain = true">
          {{title || '请选择'}}
          <image src="/static/images/my7.png"></image>
        </view>
      </view>
      <view class="textarea-box">
        <view class="name">纠错内容</view>
        <view class="value">
          <textarea v-model="content" placeholder="请输入纠错内容"></textarea>
        </view>
      </view>
      <view class="img-box">
        <view class="name">纠错图片</view>
        <view class="list-d">
          <view class="li" v-for="(item,index) in imgList" :key="index">
            <view class="imd">
              <image :src="item" mode="widthFix"></image>
            </view>
            <image src="/static/images/img-del.png" @click="imgList.splice(index,1)" class="del"></image>

          </view>
          <view class="li" @click="chooseImage">
            <view class="imd">
              <image src="/static/images/img-list.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="submitFun">
        保存
      </view>
    </block>
    <block v-else>
      <view class="main-box">
        <view class="img">
          <image src="/static/images/img-7.png"></image>
        </view>
        <view class="title">小剂将因你变的更好</view>
        <view class="btn" @click="chooseImage">
          拍照补充配料
        </view>
      </view>
    </block>
    <u-picker :show="alterMain" keyName="title" :columns="[columns]" closeOnClickOverlay @cancel="alterMain = false" @confirm="confirmFun"></u-picker>
  </view>
</template>

<script>
import { HTTP_REQUEST_URL } from '@/config/app.js'
import { setFeedback, getFeedBackCate } from '@/api/api.js'
export default {
  data() {
    return {
      content: '',
      title: '',
      imgList: [],
      submitMain: false,
      alterMain: false,
      retImg: '',
      context: null,
      code: '',
      columns: [],
      retData: {},
      chooseImageMain: false
    };
  },
  onLoad(opition) {
    if (opition.type) {
      this.type = opition.type
      if (opition.type == 1) {
        uni.setNavigationBarTitle({
          title: "上报补充信息"
        })
      } else {
        uni.setNavigationBarTitle({
          title: "产品纠错"
        })
      }

    }
    if (opition.code) {
      this.code = opition.code
    }

    this.retData = uni.getStorageSync('RetData')
    getFeedBackCate().then((res) => {
      this.columns = res.data
    })
  },
  methods: {
    confirmFun(e) {
      console.log(e)
      this.title = e.value[0]
      this.alterMain = false;
    },
    submitFun() {
      if (!this.title) {
        uni.showToast({
          title: '请选择纠错类型',
          icon: 'none'
        });
        return;
      }
      if (!this.content) {
        uni.showToast({
          title: '请输入纠错内容',
          icon: 'none'
        });
        return;
      }
      if (!this.imgList.length) {
        uni.showToast({
          title: '请上传纠错图片',
          icon: 'none'
        });
        return;
      }

      this.setRestockItemFun();
    },
    error(e) {
      console.log(e);
    },
    toIndex() {
      uni.navigateTo({
        url: '/pages/tabbar/index'
      })
    },
    chooseImageOne() {
      const that = this
      if (uni.getStorageSync('uploadImageThree')) {
        that.chooseImage();
      } else {
        uni.showModal({
          title: '温馨提示',
          content: 'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
          success(ress) {
            if (ress.confirm) {
              uni.setStorageSync('uploadImageThree', true)
              that.chooseImage();
            }
          }
        })
      }
    },
    chooseImage() {
      const that = this

      uni.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        success: (res) => {
          let maxNums = 10485760;
          let main = false;
          res.tempFiles.forEach((item) => {
            if (item.size > maxNums) {
              main = true;
            }
          })
          if (main) {
            uni.showToast({
              title: '图片过大，不建议勾选原图',
              icon: 'none'
            })
            return
          }
          that.urlArr = []
          that.uploadFileAdd(res, 0, res.tempFilePaths.length)
        }
      });
    },
    async uploadFileAdd(res, num, max) {
      const that = this
      if (num == max) {
        that.$nextTick(() => {
          if (that.type == 1) {
            that.setRestockItemFunOne(that.urlArr.join())
          } else {
            that.imgList.push(...that.urlArr)
          }
        })
      } else {
        const result = await that.uploadFileFun(res.tempFilePaths[num])
        that.urlArr.push(result.data.url)
        this.uploadFileAdd(res, num + 1, max)
      }

    },
    async uploadFileFun(src) {
      const that = this;
      let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: HTTP_REQUEST_URL + '/api/newUpload',
          filePath: src,
          name: "file",
          header: {
            'Authorization': 'Bearer ' + token
          },
          success(res1) {
            resolve(JSON.parse(res1.data))
          },
          fail(res) {
            that.chooseImageMain = false;
            reject(res)
          }
        })
      })
    },
    setRestockItemFunOne(url) {
      const that = this
      //进行照相
      setFeedback({
        type: that.type == 1 ? 1 : 0,
        content_img: url,
        gcode: that.code
      }).then((resobj) => {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)

      }).catch((err) => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
      })
    },
    setRestockItemFun() {
      const that = this
      //进行照相
      setFeedback({
        type: that.type == 1 ? 1 : 0,
        content_img: that.imgList.join(','),
        gcode: that.code,
        content: that.content,
        cate_name: that.title
      }).then((resobj) => {
        that.submitMain = false;
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }).catch((err) => {
        that.submitMain = false;
        uni.showToast({
          title: err,
          icon: 'none'
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}
.wrap {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
  background-color: white;
  overflow: hidden;
  background-color: #f5f5f5;
  .goods-box {
    width: 710rpx;
    margin: 20rpx auto;
    border-radius: 10rpx;
    padding: 30rpx;
    background-color: white;
    color: #000000;
    font-size: 32rpx;
    line-height: 50rpx;
    image {
      width: 150rpx;
      height: 150rpx;
      display: inline-block;
      vertical-align: top;
    }
    .text-d {
      width: calc(100% - 150rpx);
      display: inline-block;
      vertical-align: top;
      padding: 0 20rpx;
      .span {
        color: #999999;
        font-size: 24rpx;
      }
    }
  }
  .input-box {
    width: 710rpx;
    line-height: 128rpx;
    border-radius: 20rpx;
    background-color: white;
    padding: 0 30rpx;
    overflow: hidden;
    margin: 30rpx auto;
    color: #434242;
    font-size: 30rpx;
    font-weight: 400;
    position: relative;
    z-index: 1;

    .name {
      width: 40%;
      display: inline-block;
      vertical-align: top;
    }

    .value {
      width: 60%;
      display: inline-block;
      vertical-align: top;
      text-align: right;
      font-size: 28rpx;
      image {
        width: 16rpx;
        height: 30rpx;
        display: inline-block;
        vertical-align: top;
        margin: 50rpx 0 0 20rpx;
      }
    }
  }
  .textarea-box {
    width: 710rpx;
    margin: 20rpx auto;
    border-radius: 10rpx;
    padding: 0 30rpx 30rpx 30rpx;
    background-color: white;
    color: #000000;
    font-size: 32rpx;
    line-height: 40rpx;
    .name {
      line-height: 100rpx;
    }
    .value {
      width: 100%;
      font-size: 26rpx;
      textarea {
        height: 120rpx;
        font-size: 26rpx;
      }
    }
  }
  .img-box {
    width: 710rpx;
    margin: 20rpx auto;
    border-radius: 10rpx;
    padding: 30rpx;
    background-color: white;
    color: #000000;
    padding: 0 30rpx 30rpx 30rpx;
    background-color: white;
    color: #000000;
    font-size: 32rpx;
    line-height: 40rpx;
    .name {
      line-height: 100rpx;
    }
    .list-d {
      width: 100%;
      .li {
        width: 160rpx;
        height: 160rpx;
        display: inline-block;
        vertical-align: top;
        margin: 15rpx 15rpx 0 0;
        position: relative;
        .imd {
          width: 160rpx;
          height: 160rpx;
          display: inline-block;
          vertical-align: top;
          position: relative;
          z-index: 1;
          overflow: hidden;
          image {
            width: 100%;
            min-height: 100%;
          }
        }
        .del {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          right: -20rpx;
          top: -20rpx;
          z-index: 2;
        }
      }
    }
  }

  .btn {
    line-height: 100rpx;
    width: 500rpx;
    text-align: center;
    color: white;
    background-color: #2767e6;
    border-radius: 50rpx;
    font-weight: 700;
    font-size: 30rpx;
    margin: 100rpx auto;
  }
  .main-box {
    min-height: calc(100vh - 100rpx);
    background-color: white;
    overflow: hidden;
    .img {
      width: 177rpx;
      height: 193rpx;
      margin: 150rpx auto 0 auto;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
      }
    }
    .title {
      color: #434242;
      font-size: 34rpx;
      text-align: center;
      font-weight: 700;
      line-height: 80rpx;
      margin: 50rpx 0;
    }
  }
}
</style>
